<template>
  <dragger @getData="getData"
           @delete-area="$emit('delete-area',obj.uniqueCode)"
           @change-area="$emit('change-area')"
           @default-layout="$emit('default-layout')"
           @update-area="(height)=>{$emit('update-area',{uniqueCode:obj.uniqueCode,height})}"
           :obj="obj">
    <template slot="title-left">
      <div class="shipi-title">
        <div>
          <i class="iconfont iconshenpi color-span title-span"></i>
          <span :class="['title-span',activeTitle === key?'isActive':'']"
                @click="activeTitle = key"
                v-for="(item,key,index) in dbsp"
                :key="index">{{key}}</span>
        </div>
        <el-button type="text"
                   v-if="activeTitle === firstKey"
                   @click="getPlatformComponentsPath($router,`/processManagement/task/index-2&prefix=/admin&name=我的任务`)">查看更多</el-button>
      </div>
    </template>
    <template slot="content">
      <div class="shipi-slide"
           v-if="dbsp[activeTitle] && dbsp[activeTitle].length > 0">
        <div v-for="(item,index) in dbsp[activeTitle]"
             :key="index"
             class="shipi-warp">
          <span @click="goDetail(item)">{{item.objectName?`【${item.objectName}】`:''}}{{item.objectNo}}</span>
          <span>{{item.createTime?item.createTime.substr(0,10):''}}</span>
        </div>
      </div>
      <div v-else
           class="shipi-slide no-data">
        <img src=""
             alt="">
        <span>暂无数据</span>
      </div>
    </template>
  </dragger>
</template>

<script>
import dragger from './dragger'
import { getPlatformComponentsPath } from '../../util/util'
import { getReviewtodo } from './config'

export default {
  components: { dragger },
  props: {
    obj: {
      required: true,
      type: Object
    }
  },
  data () {
    return {
      getPlatformComponentsPath,
      activeTitle: 0,
      firstKey: '',
      dbsp: []
    }
  },
  methods: {
    goDetail (subItem) {
      if (!subItem.routerUrl) return
      getPlatformComponentsPath(this.$router, subItem.routerUrl.indexOf('?') !== -1 ? subItem.routerUrl + '&prefix=' + subItem.routePrefixFront : subItem.routerUrl + '?prefix=' + subItem.routePrefixFront)
    },
    getData () {
      getReviewtodo().then(res => {
        this.dbsp = res.data.data
        for (const k in res.data.data)
          if (!this.activeTitle) {
            this.firstKey = k
            this.activeTitle = k
          }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.no-data {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  height: 100%;
  img {
    margin-bottom: 10px;
  }
}
.shipi {
  &-title {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 24px);
    .title-span {
      font-size: 14px !important;
      &:nth-child(2) {
        margin-left: 5px;
        margin-right: 20px;
        cursor: pointer;
        color: #b3b3b3;
      }
      &:nth-child(3) {
        cursor: pointer;
        color: #b3b3b3;
      }
    }
    .isActive {
      font-weight: bold;
      color: #333 !important;
    }
  }
  &-warp {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid #ebebeb;
    & > span:nth-child(1) {
      width: calc(100% - 150px);
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: left;
      color: #808080;
      cursor: pointer;
      white-space: nowrap;
    }
    & > span:nth-child(2) {
      width: 100px;
      text-align: right;
      color: #999;
    }
  }
  &-slide {
    height: 100%;
    overflow: auto;
    margin-top: 10px;
  }
}
</style>